<html>
<head>
    <title>图层配置</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">
    <link rel="stylesheet" href="../../../swipebox.css">

    <style>
        body {
            background: #F2F2F2;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }
        .el-table__body-wrapper{
            overflow-y:scroll
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor">

    <div class="page-title">场景设置</div>
    <div class="page-main">
        <el-row>
            <el-col :span="24">
                <div class="main-head">
                    <el-form :inline="true">
                        <el-form-item>
                            <el-button type="success" @click="addClick" style="float: right">新增</el-button>
                        </el-form-item>
                    </el-form>
                </div>


                    <el-table :data="sceneList"  size="mini" style="width: 100%" height="600" style="">
                        <el-table-column prop="SceneName" label="场景名称" align="center">

                        </el-table-column>
                        <el-table-column prop="ImageName" label="图片" align="center">
                            <template slot-scope="scope">
                                <a :href="imageUrl+scope.row.ImageName" class="swipebox" title="ESC键退出">
                                    <img :src="imageUrl+scope.row.ImageName" style="max-width:80px;max-height: 80px "/>
                                </a>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button round size="small" icon="el-icon-edit" title="修改"
                                           @click="editBtn(scope.row)"></el-button>
                                <el-button round icon="el-icon-delete" size="small" title="删除"
                                           @click="delBtn(scope.row.SceneID)"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>

            </el-col>
        </el-row>
            <el-dialog title="新增场景"
                       :visible.sync="addFormVisible"
                       center
                       width="35%">
                <el-form ref="addForm" :model="addForm" label-width="80px">
                    <el-form-item label="场景名称" prop="SceneName" :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                        <el-input v-model="addForm.SceneName"></el-input>
                    </el-form-item>
                    <el-form-item label="场景图片">
                        <el-upload
                                class="upload-demo"
                                drag
                                :action="url+'/api/idm/v1/ScadaScene/Add'"
                                :headers="headers"
                                name="ImageName"
                                :data="addForm"
                                :limit="1"
                                :auto-upload="false"
                                ref="upload">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancelClick('addForm')" style="background-color: #7eb8b0  ">取消</el-button>
                    <el-button @click="submitClick('upload')" style="margin-left: 40px;background-color: #f9b317;">提交
                    </el-button>
                </div>
            </el-dialog>
            <el-dialog title="编辑场景"
                       :visible.sync="editFormVisible"
                       center
                       width="35%">
                <el-form ref="editForm" :model="editForm" label-width="80px">
                    <el-form-item label="场景名称" prop="SceneName" :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                        <el-input v-model="editForm.SceneName"></el-input>
                    </el-form-item>
                    <el-form-item label="场景图片">
                        <el-upload
                                class="upload-demo"
                                drag
                                :action="url+'/api/idm/v1/ScadaScene/Update'"
                                :headers="headers"
                                name="ImageName"
                                :data="editForm"
                                :on-success="file_success"
                                :limit="1"
                                :auto-upload="false"
                                ref="upload2">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancelClick('editForm')" style="background-color: #7eb8b0  ">取消</el-button>
                    <el-button @click="editClick('editForm')" style="margin-left: 40px;background-color: #f9b317;">保存
                    </el-button>
                </div>
            </el-dialog>

    </div>


</div>


<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery.swipebox.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>
    jQuery(function ($) {
        $(".swipebox").swipebox();
    });
    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            url: SiteConfig.webApiset,
            proNo: null,
            sceneList: [],
            tooltip: false,
            addFormVisible: false,
            addForm: {
                SceneName: '',
                projectNo: '',
            },
            headers: {
                uid: '',
                token: '',
            },
            uploadData: {
                SceneID: '',
            },
            uploadVisible: false,
            editForm: {
                SceneID: '',
                SceneName: '',
            },
            editFormVisible: false,
            isRouterAlive: true
        },
        methods: {
            addClick() {
                this.addFormVisible = true;
            },
            uploadImg(id) {
                this.uploadData = {
                    SceneID: id
                }
                this.uploadVisible = true;
            },
            editBtn(row) {
                this.editFormVisible = true;
                this.editForm = {
                    SceneName: row.SceneName,
                    SceneID: row.SceneID,
                    projectNo: row.projectNo,
                };
            },
            delBtn(id) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    HttpUtil.get('ScadaScene/Delete', {SceneID: id}).success((res) => {
                        this.getScene();
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            editClick() {
                HttpUtil.get('ScadaScene/Update', this.editForm).success((res) => {
                    this.$refs['upload2'].submit();
                    this.$message.success('修改成功');
                    this.editFormVisible = false;
                    this.getScene();
                })
            },
            submitClick(name) {
                this.$refs[name].submit();
                this.$message.success('提交成功');
                this.addFormVisible = false;
            },
            file_success(){
                this.getScene();
            },
            cancelClick(name) {
                switch (name) {
                    case 'addForm':
                        this.addForm = {};
                        this.addFormVisible = false;
                        break;
                    case 'editForm':
                        this.editFormVisible = false;
                        this.editForm = {};
                        break;
                }
            },
            getScene() {
                HttpUtil.get('ScadaScene/List', {projectNo: this.proNo}).success((res) => {
                    this.sceneList = res.data;
                    vuePage.isRouterAlive = false;
                    vuePage.isRouterAlive = true;
                    this.$set(this.sceneList);
                })
            }
        },
        created: function () {

        },
        mounted: function () {
            this.tooltip = true;
            this.headers = {
                uid: SiteConfig.account.uId,
                token: SiteConfig.account.accessToken
            }
            this.proNo = SiteConfig.account.projectNo;
            this.addForm.projectNo = SiteConfig.account.projectNo;
            this.getScene();
            this.imageUrl = SiteConfig.webApiset;
        }
    });


</script>

</body>
</html>
